<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0& ak=9LVtztl4kxzEXtCCqb2824GOp0rSdmSC"></script>
<title>修改组织信息</title>
<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}">
</head>
<script th:src="@{../layui/layui.js}"></script>
<script type="text/javascript">
		layui.use('form', function() {
			var form = layui.form;
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				//return false;
			});
		});
</script>

<body>
	<h3 align="center">编辑组织信息</h3>
	<br />
	<br />
	<form action="updateOrganizationInformation" method="post" class="layui-form layui-form-pane">
		
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">组织名称</label>
			<div class="layui-input-block">
				<input type="text" name="oname" placeholder="请输入组织名称"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.oname}}">
			</div>
		</div>
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">书记姓名</label>
			<div class="layui-input-block">
				<input type="text" name="bname" placeholder="请输入书记姓名"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.bname}}">
			</div>
		</div>
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">组织联系人</label>
			<div class="layui-input-block">
				<input type="text" name="linkman" placeholder="请输入组织联系人姓名"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.linkman}}">
			</div>
		</div>
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">联系人电话</label>
			<div class="layui-input-block">
				<input type="text" name="ophone" placeholder="请输入联系人电话"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.ophone}}">
			</div>
		</div>
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">委员名单</label>
			<div class="layui-input-block">
				<input type="text" name="partysList" placeholder="请输入委员名单"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.partysList}}">
			</div>
		</div>
		<!-- 普通文本输入框 -->
		<div class="layui-form-item">
			<label class="layui-form-label">组织地址</label>
			<div class="layui-input-block">
				<input type="text" id="address" name="address" placeholder="请输入组织地址"
					autocomplete="off" required lay-verify="required"
					class="layui-input" th:attr="value=@{${orginfd.address}}">
			</div>
		</div>
		<input type="hidden" name="oid" th:attr="value=@{${orginfd.oid}}">
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		坐标位置:<input type="text" name="coordinate" id="coordinate" th:attr="value=@{${orginfd.coordinate}}">
	</form>
	<p id="allmap"></p>

<script type="text/javascript">
	//1.初始化地图。将原来的位置设置为地图中心点，并显示标记
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point([[${orginfd.coordinate}]]), 11);  // 设置中心点
	//map.centerAndZoom("新乡");//设置为新乡
	map.setCurrentCity("新乡");          
	map.addControl(new BMap.MapTypeControl());   
	map.enableScrollWheelZoom(true);  
	//创建小狐狸图标
	//function
	var pt = new BMap.Point([[${orginfd.coordinate}]]);
	var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
	var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
	map.addOverlay(marker2); 
	//2.设置点击事件，每点击一次就将地图上现有的标记清除，设置点击位置新的标记
	var geocoder= new BMap.Geocoder(); 
	var address=null;
	map.addEventListener("click",function(e){
		//清除标记
		map.clearOverlays();
		//alert(e.point.lng + "," + e.point.lat);
		index= e.point.lng + "," + e.point.lat;
		//创建小狐狸图标
		var pt = new BMap.Point(e.point.lng,e.point.lat);
		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
		var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		geocoder.getLocation(e.point,function(rs){ 
			console.log(rs.address); //地址描述(string) 
			console.log(rs.addressComponents);//结构化的地址描述(object) 
			console.log(rs.addressComponents.province); //省 
			console.log(rs.addressComponents.city); //城市 
			console.log(rs.addressComponents.district); //区县 
			console.log(rs.addressComponents.street); //街道 
			console.log(rs.addressComponents.streetNumber); //门牌号 
			console.log(rs.surroundingPois); //附近的POI点(array) 
			console.log(rs.business); //商圈字段，代表此点所属的商圈(string) 
			address=rs.addressComponents.province+","+rs.addressComponents.city+","+rs.addressComponents.district+","+rs.addressComponents.street
			//alert(address);
			layui.$("#coordinate").val(index);
			layui.$("#address").val(address);
			})
	});
	//3.将选中的新的地址信息赋值给组织地址，将坐标信息赋值给坐标
	//$("#address").val(address);
	
</script>
</body>
</html>